<!--
  @param:设备分类5个模块
  @author:lengjia
  @created:2019/11/13
-->
<template>
  <div class="devclasscontent">

    <div v-for="(item,index) in items" :key="item.id">
      <div class="cnext" ref="dimg" :class="active === index ?'isActive' : '' "
       @mouseenter="menter(index)"
       @mouseleave="mleave(index)"
       @click="devChange(item)"
       >
        <img class="icons" :src="item.src" />
        <span>{{ item.name }}</span>
      </div>
        <img class="icons bnext" v-for="ite in item.inext" :key="ite.id" :src="ite.src" />
    </div>

  </div>
</template>

<script>
export default {
  name: 'devclass',
  data() {
    return {
      active:'',
      items:[
			{id:'1',name:'视频监控',src: require('@/assets/icon/bottom1.png'),hsrc: require('@/assets/icon/bottom1h.png'),
				inext:[
					{id:'1_1',src:require('@/assets/icon/bottomnext.png')},
					],
			},
			{id:'2',name:'广播',src: require('@/assets/icon/bottom2.png'),hsrc: require('@/assets/icon/bottom2h.png'),
				inext:[
					{id:'2_1',src:require('@/assets/icon/bottomnext.png')},
					],
			},
      {id:'3',name:'门禁',src: require('@/assets/icon/bottom3.png'),hsrc: require('@/assets/icon/bottom3h.png'),
      	inext:[
      		{id:'3_1',src:require('@/assets/icon/bottomnext.png')},
      		],
      },
      {id:'4',name:'电子巡更',src: require('@/assets/icon/bottom4.png'),hsrc: require('@/assets/icon/bottom4h.png'),
      	inext:[
      		{id:'4_1',src:require('@/assets/icon/bottomnext.png')},
      		],
      },
      {id:'5',name:'报警设备',src: require('@/assets/icon/bottom5.png'),hsrc: require('@/assets/icon/bottom5h.png')
      }
		]
    };
  },
  methods: {
    menter(id){
      this.active=id;
      this.$refs.dimg[id].children[0].src=this.items[id].hsrc;
      this.$refs.dimg[id].children[1].style.color='#1AF8F5';
    },
    mleave(id){
      this.active='';
      this.$refs.dimg[id].children[0].src=this.items[id].src;
      this.$refs.dimg[id].children[1].style.color='#57B2EA';
    },
    devChange(e){
      this.active=e.id;
      console.log(e.name);
    }
  },
  created() {},
  mounted() {

  }
};
</script>

<style lang="less" scoped>
  .isActive{
    background: url(~assets/icon/bottombgh.png) no-repeat !important;
  }

.devclasscontent {
  width: 100%;
  position: absolute;
  bottom: 23%;
  z-index: 9;
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  div .icons{
    height: 35px;
    width: 30px;
    vertical-align: middle;
  }
  .cnext {
    padding: 10px;
    text-align: center;
    width: 70px;
    float: left;
    color: @fcolor;
    cursor: pointer;
    pointer-events: auto;
    background: url(~assets/icon/bottombg.png) no-repeat;
    background-size: 100% 100% !important;
    span {
      width: 100%;
      display: inline-block;
      margin-top: 5px;
      font-size: 13px;
    }
  }
  .bnext {
    float: left;
    height: 30px;
    margin: 25px 15px;
  }
}
</style>
